<template>
  <div class="detection_result">
    <c-title text="评估结果"></c-title>
    <van-search v-model="order_number" placeholder="搜索订单号" shape="round" @search="input_handle" />
    <div class="list">
      <div class="item" v-for="item in list" :key="item.id">
        <div class="flex space-between">
          <span class="fs-24">{{ item.order_sn }}</span>
          <span class="fs-24 c-969696">{{ item.created_at }}</span>
        </div>
        <div class="flex space-between fs-24">
          <div style="text-align: left;">
            <div class="flex align-items-center" style="margin: 0.75rem 0;">
              <div v-if="item.store_thumb"
                style="width: 36px; height: 36px; border-radius: 100px; overflow: hidden; margin-right: 0.4375rem;">
                <img :src="item.store_thumb" />
              </div>
              <span v-if="item.store_name">{{ item.store_name }}</span>
            </div>
            <!-- <div style="margin-bottom: 0.375rem;">设备名称：{{ item.machine_name }}</div>
            <div>设备序列ID：{{ item.code }}</div> -->
          </div>
          <div class="flex-end" v-if="item.has_many_result_count == 0">
            <van-button style="width: 4.75rem;" round color="#969696" disabled size="small">查看结果</van-button>
          </div>
          <router-link v-else :to="fun.getUrl('detection_result_detail', { id: item.id })" tag="div" class="flex-end">
            <van-button style="width: 4.75rem;" round color="#EF5452" size="small">查看结果</van-button>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { scrollMixin } from '../../../utils/mixin';
export default {
  mixins: [scrollMixin],
  data() {
    return {
      order_number: "",
      list: [],
      isLoadMore: true,
      page: 1,
      total_page: 0,
    };
  },
  activated() {
    this.isLoadMore = true;
    this.getData()
  },
  methods: {
    getMoreData() {
      if (this.page >= this.total_page) {
        return;
      }
      this.isLoadMore = false;
      let page = this.page + 1;
      this.getData({ page });
    },
    input_handle(value) {
      this.getData({ order_sn: value, page: 1 })
    },
    async getData(json = {}) {
      let { result, msg, data: { data, current_page, last_page } } = await $http.get('plugin.health-check.frontend.index.index', json);
      if (result == 0) {
        return this.$toast(msg);
      }
      this.isLoadMore = true;
      this.page = current_page;
      this.total_page = last_page;
      current_page == 1 ? this.list = data : this.list = this.list.concat(data);
    },
  }
};
</script>

<style scoped lang="scss">
.detection_result {
  .list {
    padding: 0.4688rem 0.4375rem;
  }

  .flex {
    display: flex;
  }

  .space-between {
    justify-content: space-between;
  }

  .align-items-center {
    align-items: center;
  }

  .c-969696 {
    color: #969696;
  }

  img {
    margin: 0;
    width: 100%;
    height: 100%;
  }

  .fs-24 {
    font-size: 0.75rem;
  }

  .item {
    background: #fff;
    border-radius: 0.3125rem;
    padding: 0.5rem 0.6875rem 1.25rem;
    margin-bottom: 0.75rem;
  }

  .flex-end {
    align-self: flex-end;
  }
}
</style>
